<template>
  <div class="foodpad">
    <div class="ub ub-ver" v-for="(items, index) in addValue.meal">
      <div class="ub pad_05 bs_bb">
        <div class="ub fz12 bold ub-ac wd-15">{{items.typeName}}</div>
        <div class="ub wd_70 fz08 ub-ac margin-l05">{{'你可以选择一份' + items.typeName}}</div>
        <div class="ub wd_15 ub-pe" @click="toogleShowFoods(index)">
          <div class="ub ub-img" :class="{'arrow_down':showFoods[index], 'arrow_up': !showFoods[index] }"></div>
        </div>
      </div>
      <div class="ub ub-ver">
        <div class="ub ub-ver pad_05 bs_bb  wd_100" v-for="(item, value) in items.data" @click="chooseFoods(index,value)" v-show="showFoods[index]" :class="{'bg_f2':addValue[index] == value}">
          <div class="ub margin-l05 ub-pj ">
            <div class="ub ub-ac">
              <img class="index-height ub-img" :src="item.goodsPicture">
            </div>
            <div class="ub ub-ver ub-pc wd_50">
              <div class="ub pad_b1">{{item.goodsChName}}</div>
              <div class="ub foucus">￥{{item.goodsPrice}}</div>
            </div>
            <div class="ub ub-ac">
              <div class="ub-img form_radio" :class="{'form_radio': typeof addValue.seledMeal[index][addValue.seledpiId] != 'number','form_tick':addValue.seledMeal[index][addValue.seledpiId] == value}"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ub keepFooter"></div>
    <div class="footer">
      <div class="ub">
        <div class="ub ub-ac wd_70 detail">
          <div class="ub ub-ac">合计：</div>
          <div class="ub ub-ac fz12 foucus margin-l05">￥{{sumValue()}}</div>
          <!-- <div class="ub">
                                <div class="ub ub-ac fc-8b">明细</div>
                                <div class="ub-img arrow_up margin-l05"></div>
                              </div> -->
        </div>
        <div class="ub ub-ver wd_30 next ub-pc ub-ac">
          <div class="ub ub-ac ub-pc" @click="$router.go(-1)">确定选择</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import { mapState } from 'vuex';
export default {
  created: function () {
    this.$store.commit('changeHeader', { // 提交首页header
      left: '关闭',
      right: '',
      middle: '选择餐食',
      ifshow: true,
      leftAction: '-1',
      leftIcon: 'closeIcon',
      rightAction: '',
      rightIcon: ''
    });
  },
  data: function () {
    return {
      showFoods: [true, true, true]
    }
  },
  components: {
  },
  computed: mapState(['addValue']),
  methods: {
    chooseFoods: function (index, value) {
      // console.log(index + ',' + value);
      let piId = this.addValue.seledpiId
      this.$store.commit('setSeledMeal', { piId, index, value });
    },
    toogleShowFoods: function (index) {
      // console.log(index);
      let toggle = !this.showFoods[index];
      // console.log(toggle)
      this.showFoods.splice(index, 1, toggle);
    },
    sumValue: function () {
      let sum = 0;
      let detail = this.addValue.meal;
      let piId = this.addValue.seledpiId;
      this.addValue.seledMeal.forEach(function (item, index) {
        let seledIndex = item[piId]
        if (typeof seledIndex === 'number') {
          sum += detail[index].data[item[piId]].goodsPrice;
        }
      });
      console.log(sum)
      return sum;
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../stylus/base.styl';
.foucus
  color: #FFA314;
.bold
  font-weight: bold;
.arrow_up
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('arrow_up@2x.png');
.arrow_down
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('arrow_down@2x.png');
.form_radio
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('form_radio.png');
.form_tick
  width: f_times(1.5);
  height: f_times(1.5);
  background-image: url('form_tick.png');
.wd_15
  width: 15%;
.wd_70
  width: 70%;
.food_img
  width: f_times(6);
  height: f_times(6);
  margin-right: f_times(1);
.maxWidth
  max-width: 50%;
.footer
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  // box-sizing: border-box;
  >div
    // padding: f_times(1);
    width: 100%;
    height: f_times(3);
    // box-sizing: border-box;
    background-color: #fff;
.wd_30
  width: 30%;
.next
  padding: f_times(0.6) f_times(0.6) f_times(0.6) 0;
  box-sizing: border-box;
  background-color: #843D99;
  color: #fff;
.detail
  padding: f_times(0.6) f_times(0.2) f_times(0.6) f_times(1.5);
  box-sizing: border-box;
.keepFooter
  margin-bottom: f_times(3);
.index-height
  height: f_times(3.8);
  width: f_times(5);
.foodpad
  padding-bottom: f_times(3);
</style>